<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html lang="zh">
<head>
    <%@include file="/lyear/common/head.jsp" %>
</head>

<body>

<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <%@include file="/lyear/common/aside.jsp" %>
        <!--End 左侧导航-->

        <!--头部信息-->
        <%@include file="/lyear/common/top.jsp" %>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <!--页面主要内容-->
        <main class="lyear-layout-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <ul class="nav nav-tabs page-tabs">
                                <li class="active"><a href="#!">基本信息</a></li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane active">
                                    <label for="userAvatar">头像</label>
                                    <div class="form-group">
                                        <div class="img-group">

                                            <table>
                                                <tr>
                                                    <td width="150px">
                                                        <img src="${author.avatar}" alt="用户头像" id="userAvatar"
                                                             style="width:120px;height:120px;">
                                                    </td>
                                                    <td>
                                                        <form id="userAvatarForm" enctype="multipart/form-data">
                                                            <input type="hidden" id="id" value="${author.id}">
                                                            <a href="javascript:;" class="file">修改头像
                                                                <input type="file" name="avatar" id="img">
                                                            </a><br>
                                                            <input type="button" class="buttonAndSave" value="上传并保存"
                                                                   onclick="updateAvatar()">
                                                        </form>

                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="web_site_title">昵称</label>
                                        <input class="form-control" type="text" id="web_site_title"
                                               name="web_site_title" value="${author.nickname}" disabled>
                                        <div class="form-group">
                                            <label for="web_site_gender">性别</label>

                                            <c:if test="${author.gender==1}">
                                                <input class="form-control" type="text" id="web_site_gender"
                                                       name="web_site_gender" value="男" disabled>
                                            </c:if>
                                            <c:if test="${author.gender==2}">
                                                <input class="form-control" type="text" id="web_site_gender"
                                                       name="web_site_gender" value="女" disabled>
                                            </c:if>
                                            <c:if test="${author.gender==3}">
                                                <input class="form-control" type="text" id="web_site_gender"
                                                       name="web_site_gender" value="未知" disabled>
                                            </c:if>

                                        </div>
                                    <div class="form-group">
                                        <label for="web_site_tel">电话</label>
                                        <input class="form-control" type="text" id="web_site_tel" name="web_site_tel"
                                               value="${author.tel}" disabled>
                                    </div>
                                    <div class="form-group">
                                        <label for="web_site_qq">QQ</label>
                                        <input class="form-control" type="text" id="web_site_qq" name="web_site_qq"
                                               value="${author.qq}" disabled>
                                    </div>
                                    <div class="form-group">
                                        <label for="web_site_wechat">微信</label>
                                        <input class="form-control" type="text" id="web_site_wechat"
                                               name="web_site_wechat" value="${author.wechat}" disabled>
                                    </div>
                                    <div class="form-group">
                                        <label for="web_site_info">备注</label>
                                        <textarea class="form-control" id="web_site_info" rows="5" name="web_site_info"
                                                  disabled>${author.info}</textarea>
                                    </div>

                                    <div class="form-group">
                                        <a href="${pageContext.request.contextPath}/author/getByIdEdit/${author.id}">
                                            <button class="btn btn-primary" type="submit">编辑
                                            </button>
                                        </a>
                                        <button type="button" class="btn btn-default"
                                                onclick="javascript:history.back(-1);return false;">返 回
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <!--End 页面主要内容-->
        <!--End 页面主要内容-->
    </div>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/lyear/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/lyear/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/lyear/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/lyear/js/main.min.js"></script>
<script type="text/javascript">
    /**
     * 修改用户头像
     * @returns {boolean}
     */
    function updateAvatar() {
        let formData = new FormData($('#userAvatarForm')[0]);
        formData.append("avatar", $("#img")[0].files[0]);
        formData.append("id", $("#id").val());

        let uploading = false;
        if (uploading) {
            alert("文件正在上传中，请稍候!");
            return false;
        }

        $.ajax({
            url: '/projshow/user/updateAvatar', /*接口域名地址*/
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            dataType: "json",
            beforeSend: function () {
                uploading = true;
                console.log(uploading);
            },
            success: function (res) {
                uploading = false;
                console.log(res);
                if (res.code == 200) {
                    $("#userAvatar").attr('src', res.data);
                }
            }
        })
    }


    $(function () {
        $('.search-bar .dropdown-menu a').click(function () {
            let field = $(this).data('field') || '';
            $('#search_key').val(field);
            $('#search-btn').html($(this).text() + '<span h="' + field + '"></span>');
        });
    })
</script>
</body>
</html>